<template>
  <div class="nav-top">
    <div class="bread">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item,index) in getRouteMatched" :key="item.path">
          <router-link style="color: #856d72" to="/welcome" v-if="index === 0">{{ item.meta.title }}</router-link>
          <span style="color: #7a7374" v-else>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="account">
      <span class="name">{{ userName }}</span>
      <el-dropdown :show-timeout="0">
        <el-avatar shape="square" :size="60" :src="avatar"/>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toPersonalCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ArrowRight} from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();

const userName = localStorage.getItem('accountName');
const avatar = 'https://zchuan-miy.oss-cn-hangzhou.aliyuncs.com/static-dir/2024-07-15/1721018745545.png';
const getRouteMatched = computed(() => {
  return route.matched;
});
const logout = () => {
  localStorage.clear();
  router.replace({name: 'login'});
}

const toPersonalCenter = () => {
  router.push({name: 'center'});
}
</script>

<style scoped>
.nav-top {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.el-breadcrumb {
  font-size: 18px;
}

.account {
  display: flex;
  align-items: center;
}

.name {
  margin-right: 20px;
  font-size: 18px;
  color: #856d72;
}
</style>